<template>
    <div>
        <echartsLayout :formState="false" :tableState="false">
            <div slot="form">
                <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model="form.userName" placeholder="请输入用户名" :maxlength="16"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="真实姓名" prop="realName">
                                <el-input v-model="form.realName" placeholder="请输入真实姓名" :maxlength="12"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="form.phone" placeholder="请输入手机号" :maxlength="11"></el-input> 
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="角色" prop="roleId">
                                <el-select v-model="form.roleId" placeholder="请选择角色" style="width:100%">
                                    <el-option
                                        v-for="item in roleList"
                                        :key="item.pId"
                                        :label="item.sName"
                                        :value="item.pId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="17">
                            <div class="btn-query">
                                <el-button type="primary" class="btn-common" @click="search">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div>
            <!--表格 start-->
            <div slot="table">
                <div class="table-title">
                    <el-button @click="addNewUser" class="btn-common">添加员工</el-button>
                </div> 
                <el-table :data="userList" border v-loading="loading" style="width: 100%">
                    <el-table-column label="用户名" align="center">
                        <template scope="scope">
                            <span>{{scope.row.account | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="真实姓名" align="center">
                        <template scope="scope">
                            <span>{{scope.row.username | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="手机号" align="center">
                        <template scope="scope">
                            <span>{{scope.row.phone | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="角色" align="center">
                        <template scope="scope">
                            <span>{{scope.row.roleName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="状态" align="center">
                        <template scope="scope">
                            <span>{{scope.row.status === '0' || scope.row.status === 0 ?'禁用':'启用'}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="最近登陆时间" align="center">
                        <template scope="scope">
                            <span>{{scope.row.lastLoginTime | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间" align="center">
                        <template scope="scope">
                            <span>{{scope.row.createTime | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="其他操作" align="center" width="220">
                        <template scope="scope">
                             <el-button @click="edit(scope.row)" class="btn-success" type="text">修改</el-button>
                             <el-button @click="initPwd(scope.row.employeeId)" class="btn-success" type="text">初始化密码</el-button>
                             <el-button @click="isDisable(scope.row.employeeId,scope.row.status)" class="btn-success" type="text">{{scope.row.status == '0'?'启用':'禁用'}}</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!--表格 end-->
        </echartsLayout>

        <!--新增/编辑用户-->
        <user-manage-dialog :visible="userManage" :edit-item="editItem" :role-list="roleList" @clear-search="clearSearch" @update-list="queryData" :state="isAdd" v-if="userManage.isShow" ></user-manage-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import userManageDialog from './addNewUserDialog';
import {listEmployeeByCondition, listEmployeeRole, updatePassword, updateEmployeeStatus} from 'api/userManager'
import echartsLayout from 'components/TableLayout/echartsLayout'; 
import validate from '@/utils/validate';

export default {
    name: 'userManageList',
    components: {echartsLayout, userManageDialog},
    data() {
        return {
            form: {
                userName: '', // 用户名
                realName: '', // 真实姓名
                phone: '', // 手机号
                roleId: '' // 角色
                
            },
            roleList: [
            ],
            userList: [
            ],
            rules: {
                userName: [
                     { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '请输入中英文数字，6~16个字符长度', trigger: 'blur' }
                    //  { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ],
                realName: [
                    { pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文，12字符长度以内', trigger: 'blur' }
                ],
                phone: [...validate.phone()]
            },
            loading: true,
            userManage: {
                isShow: false
            },
            pageQuery: {
                total: 0,
                currentpage: 1
            },
            editItem: {}, // 修改的员工信息
            isAdd: true
        }
    },
    created() {
        // 获取角色列表
        this.getRoleList();
        
        // 获取分页数据
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },

        // 添加员工
        addNewUser() {
            this.userManage.isShow = !this.userManage.isShow;
            this.isAdd = true;
        },

        // 编辑
        edit(item) {
            this.userManage.isShow = !this.userManage.isShow;
            this.editItem = item;
            this.isAdd = false;
        },
        clearSearch() {
            this.form.userName='';
            this.form.realName='';
            this.form.phone='';
            this.form.roleId='';
        },
        // 初始化密码
        initPwd(employeeId) {
            this.$confirm('确定要初始化密码吗？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' '
            }).then(() => {
                updatePassword(employeeId).then(res => {
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '初始化密码成功，新密码是111111'
                        });
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                })
            })
        },

        // 启用禁用
        isDisable(employeeId, status) {
            console.log(11111111, status);
            this.$confirm(status=== '0'?'确定启用该员工？':'确定禁用该员工？禁用后，该员工将无法登录e学云报表系统，还请慎重操作！', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' '
            }).then(() => {
                let statusTemp = status === '0'?'1':'0';
                updateEmployeeStatus(employeeId, statusTemp).then(res => {
                    console.log('res.data.errorMsg', res.data.errorMsg);
                    this.$message({
                        type: 'success',
                        message: res.data.errorMsg
                    })
                    this.queryData();
                })
            })
            
        },
        search() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.queryData();
                } else {
                    return false;
                }
            })
        },
        // 获取分页查询列表
        queryData() {
            if (this.pageQuery.currentpage !== 0 && this.config.pageSize) {
                this.loading = true;
                // 调用接口
                listEmployeeByCondition(
                    this.form.userName,
                    this.form.realName,
                    this.form.phone,
                    this.form.roleId,
                    this.pageQuery.currentpage,
                    this.config.pageSize
                ).then(res => {
                    console.log('res', res);
                    this.loading = false;
                    this.userList = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination.total;
                })
            }
        },

        // 获取角色列表
        getRoleList() {
            listEmployeeRole().then(res => {
                console.log('resRole', res);
                if (res.data.content.length > 0) {
                    this.roleList = res.data.content;
                    this.roleList.unshift({ pId: '', sName: '请选择' });
                }
            })
        }
        
    }
}
</script>

<style lang="scss" scoped>
.btn-query{
    float:right;
}
</style>